<template>
	<view class="content">
		<view class="coupons_top">
			<view :class="curNav == index?'active nav_left_items':'nav_left_items'" v-for="(item,index) in navLeft" :key='index' @tap="navTap(index)">
				{{item.navName}}
			</view>
		</view>
		<view class="coupons_bottom">
			<view class="coupons_bottom_items" v-if="curNav==0" v-for="(item,index) in list" :key='index'>
				<view class="items_left">
					<text>20</text>元
				</view>
				<view class="items_middle">
					<text class="name">新户专享</text>
					<text class="money">满100元可用</text>
					<text class="date">有效期：2018.10.02</text>
				</view>
				<button>去使用</button>
			</view>
			<view class="coupons_bottom_items been_user" v-if="curNav==1" v-for="(item,index) in list" :key='index'>
				<view class="items_left">
					<text>20</text>元
				</view>
				<view class="items_middle">
					<text class="name">新户专享</text>
					<text class="money">满100元可用</text>
					<text class="date">有效期：2018.10.02</text>
				</view>
				<button>已使用</button>
			</view>
			<view class="coupons_bottom_items been_user" v-if="curNav==2" v-for="(item,index) in list" :key='index'>
				<view class="items_left">
					<text>20</text>元
				</view>
				<view class="items_middle">
					<text class="name">新户专享</text>
					<text class="money">满100元可用</text>
					<text class="date">有效期：2018.10.02</text>
				</view>
				<button>已失效</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				curNav:0,
				navLeft:[
					{
						navName:'未使用',
 
					},
					{
						navName:'已使用',
 
					},
					{
						navName:'已失效',
 
					}
				],
				list:[
					{
						name:'1200'
					}
				]
			};
		},
		methods:{
			navTap(index){
				console.log(index);
// 				let list = this.navLeft[index].children;
// 				if(list){
// 					this.list = list
// 				}else{
// 					this.list = []
// 				}
				this.curNav = index
			},
		},
		onLoad() {
			this.navTap(this.curNav)
		}
	}
</script>

<style>
.content{
	box-sizing: border-box;
	border-top: 1px solid #f5f5f5;
}
.coupons_top{
	display: flex;
	border-bottom: 1px solid #eee;
	box-shadow:0 -8px 5px -8px #eee inset ;
}
.nav_left_items{
	width: 15%;
	text-align: center;
	line-height: 85upx;
	margin: 0 10%;
}
.nav_left_items.active{
	color: #ed493d;
	border-bottom: 6upx solid #ed493d;
}
.items_left{
	color: #fff;
	padding: 0 50upx;
	box-sizing: border-box;
}
.coupons_bottom_items{
	background: #ee787a;
	margin: 32upx;
	color: #fff;
	display: flex;
	align-items: center;
	padding: 30upx 0;
	border-radius: 10upx;
}
.items_middle{
	width: 350upx;
	font-size: 30upx;
	display: flex;
	flex-direction: column;
	color: #fff;

}
.items_middle .date{
	font-size: 22upx;
}
.items_middle .name{
	font-size: 28upx;
}
.items_middle .money{
	height: 70upx;
	line-height: 50upx;
}
.items_left text{
	font-size: 60upx;
	font-weight: 600;
	padding-right: 8upx;
}
.coupons_bottom_items button{
	background: #fff;
	font-size: 28upx;
	color: #ef797a;
	height: 50upx;
	line-height: 50upx;
	border-radius: 5upx;
	width: 175upx;
	margin: 0 40rpx;
}
.been_user{
	background: #babfc5;
}
.been_user button{
	background: none;
	color: #fff;
}
button::after{
	border: none;
}
</style>
